<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{ title}}</h2>
      <h2 v-if="seen">msg -- {{msg}}</h2>
      <h2 v-else>条件为假的时候才会去渲染 和显示</h2>
      <button @click="seen = !seen">点击切换</button>
      <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </template>
      <div>
        <h2 v-if="score>90">成绩为 A</h2>
        <h2 v-else-if="score>80">成绩为 B</h2>
        <h2 v-else-if="score>70">成绩为 C</h2>
        <h2 v-else-if="score>60">成绩为 D</h2>
        <h2 v-else>成绩为 E(不及格)</h2>
      </div>
      <div>
        <h2 v-show="show">
          "v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回
          truthy 值的时候被渲染",
        </h2>
        <h2 v-show="!show">今天的天气真好呀</h2>
      </div>
      <div v-if="obj">
        <h2>v-if 的经典用法(异步数据)</h2>
        <h2>{{obj.username}}</h2>
        <h2>{{obj.age}}</h2>
        <h2>{{obj.word}}</h2>
      </div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      data: {
        title: "v-if 和 v-show 的 条件渲染 ",
        msg: "v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染",
        seen: true,
        ok: !!1,
        score: 18,
        show: true,
        obj: null,
      },
      mounted() {
        document.querySelectorAll("title")[0].innerHTML = this.title;
        setTimeout(() => {
          this.obj = {
            username: "zzs",
            age: 22,
            word: "hello world",
          };
        }, 1000);
      },
    }).$mount("#app");
  </script>
</html>
